<template>
  <el-card shadow="never">
    <el-tabs v-model="activeName1">
      <el-tab-pane label="动态" name="first">
        <el-input
          v-if="showTextarea"
          v-model="textarea"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          resize="none"
          maxlength="1000"
          show-word-limit
          @focus="hideTextarea"
        />
        <div v-else class="clearfix">
          <div style="marginBottom:10px;">
            <span style="marginRight:10px;">记录类型:</span>
            <template>
              <el-select v-model="WorkDynamic.workType" placeholder="请选择" @change="changeSelect">
                <el-option
                  v-for="item in dics"
                  :key="item.dicCode"
                  :label="item.dicName"
                  :value="item.dicCode"
                />
              </el-select>
            </template>
          </div>
          <el-input
            v-model="WorkDynamic.content"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            resize="none"
            maxlength="1000"
            show-word-limit
            @blur="trimText"
          />
          <el-button
            class="right"
            style="marginTop:10px;"
            type="primary"
            :disabled="isDisable"
            @click="showTextarea1"
          >发 布</el-button>
        </div>
        <div v-infinite-scroll="load" class="infinite-list">
          <div v-if="this.arr.length">
            <p v-for="v in arr" :key="v.id" class="dynamic_list top_padding20 infinite-list-item">
              <i class="el-icon-location" />
              {{ v.releaseTime }}
              <router-link to>{{ v.creatorUserName }}</router-link>
              {{ v.workName }}:
              <router-link to>{{ v.content }}</router-link>
            </p>
          </div>
          <div v-else>
            <p style="textAlign:center;color:#DCDFE6;lineHeight:50px;">没有更多数据</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
export default {
  props: ['dicsArr', 'workDynamicsArr', 'dataType', 'id'],
  data() {
    return {
      totalCount: 0,
      isDisable: true,
      searinfoD: {
        dataId: this.$props.id,
        keyword: '',
        page: {
          maxResultCount: 0,
          pageNo: 0,
          pageSize: 10,
          skipCount: 0
        }
      },
      showTextarea: true,
      activeName1: 'first',
      textarea: '',
      WorkDynamic: {
        dataId: '', // 数据id ,
        dataType: this.dataType, // 数据类型 ,
        workType: '', //  动态类型
        content: ''
      },
      activeName1: 'first',
      arr: []
    }
  },
  computed: {
    dics() {
      return createDics(this.$props.dicsArr, 'dicCode')
    }
  },
  watch: {
    'props.id'() {
      this.getData()
    },
    workDynamicsArr(newN) {
      this.arr = newN.items
      this.totalCount = newN.totalCount
    },
    'WorkDynamic.content'(newd) {
      Boolean(this.WorkDynamic.content.trim()) &&
      Boolean(this.WorkDynamic.workType)
        ? this.$nextTick(() => {
          this.isDisable = false
          })
        : this.$nextTick(() => {
          this.isDisable = true
          })
    }
  },
  methods: {
    trimText() {
      this.WorkDynamic.content = this.WorkDynamic.content.trim()
    },
    changeSelect() {
      Boolean(this.WorkDynamic.content.trim()) &&
      Boolean(this.WorkDynamic.workType)
        ? this.$nextTick(() => {
          this.isDisable = false
          })
        : this.$nextTick(() => {
          this.isDisable = true
          })
    },
    load() {
      if (this.totalCount === this.arr.length && this.totalCount !== 0) {
        return false
      }
      this.searinfoD.page.pageSize = this.searinfoD.page.pageSize + 10
      this.getData()
    },
    showTextarea1() {
      this.WorkDynamic.dataId = this.$props.id
      let result = Object.values(this.WorkDynamic)
      let bool = result.some(v => v === '')
      if (bool) {
        this.$message.error('请确认输入是否完整')
        return false
      }
      this.$post({
        url: mmUrl.workDynamic.create,
        data: {
          item: this.WorkDynamic
        }
      }).then(res => {
        this.showTextarea = true
        this.WorkDynamic = {
          dataId: '',
          dataType: this.dataType,
          workType: '',
          content: ''
        }
        this.getData()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    hideTextarea() {
      this.showTextarea = false
    },
    getData() {
      this.$post({
        url: mmUrl.workDynamic.get,
        data: this.searinfoD
      }).then(res => {
        this.arr = res.items.items
        this.totalCount = res.items.totalCount
      })
    },
    submit() {
      this.$post({
        url: mmUrl.workDynamic.createWorkDynamic,
        data: {
          item: {
            content: 'string',
            dataId: this.$route.params.id,
            dataType: this.dataType,
            workType: 'string'
          }
        }
      }).then(res => {
        this.getData()
        this.$message({
          type: 'success',
          message: '添加成功'
        })
      })
    }
  }
}
</script>

<style>
.infinite-list {
  height: 145px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: auto;
}
</style>
